/**
 * Creates the base structure of a button group.
 * @member Ext.container.ButtonGroup
 */
@mixin extjs-btn-group {
  .#{$prefix}btn-group {
    position: relative;
    overflow: hidden;
  }

  .#{$prefix}btn-group-body {
    position: relative;
    zoom: 1;
    padding: $btn-group-padding;

    .#{$prefix}table-layout-cell {
      vertical-align: top;
    }
  }

  .#{$prefix}btn-group-header-text {
    white-space: nowrap;
  }

  @include extjs-btn-group-ui('default');
}

/**
 * Creates a visual theme of a button group.
 * @member Ext.container.ButtonGroup
 */
@mixin extjs-btn-group-ui(
  $ui-label,
  $ui-base-color: null,

  // background
  $ui-background-color: $btn-group-background-color,

  // borders
  $ui-border-color: $btn-group-border-color,
  $ui-border-width: $btn-group-border-width,
  $ui-border-radius: $btn-group-border-radius,
  $ui-inner-border-color: $btn-group-inner-border-color,

  //header
  $ui-header-background-color: $btn-group-header-background-color,
  $ui-header-font: $btn-group-header-font,
  $ui-header-color: $btn-group-header-color
) {
  @include x-frame(
                  'btn-group',
          $ui: '#{$ui-label}-framed',
            /* Radius, width, padding and background-color */
          $border-radius: $ui-border-radius,
          $border-width: $ui-border-width,
          $padding: $btn-group-padding,
          $background-color: $ui-background-color
  );

  .#{$prefix}btn-group-#{$ui-label}-framed {
    border-color: $ui-border-color;
    @include inner-border(
            $width: $btn-group-inner-border-width,
            $color: $ui-inner-border-color
    );
  }

  .#{$prefix}btn-group-header-#{$ui-label}-framed {
    margin: $btn-group-header-margin;
  }

  .#{$prefix}btn-group-header-body-#{$ui-label}-framed {
    padding: $btn-group-header-padding;

    background: $ui-header-background-color;

    @include border-top-radius($ui-border-radius);
  }

  .#{$prefix}btn-group-header-text-#{$ui-label}-framed {
    font: $ui-header-font;
    color: $ui-header-color;
  }
}
